<template>
  <div class="box">
    <!-- 页面顶部的bar页面 -->
    <div class="boxtop">
      <van-nav-bar title="品牌" left-arrow>
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="clickLeft"
          ></van-icon>
        </template>
        <template #right>
          <!-- 搜索 -->
          <van-icon name="search" size="18" color="#fff" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 搜索栏 -->
    <div class="searchbox">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="center"
      />
      <!-- 索引栏 -->
      <van-index-bar highlight-color>
        <!-- 放一个盒子用作循环 -->
        <div v-for="(item, name) in cities" :key="name">
          <!-- 写字母栏，：index是动态，点击最左边的 -->
          <van-index-anchor class="IndexAnchor" :index="name">
            <span class="IndexName">{{ name }}</span>
          </van-index-anchor>
          <!-- 内容区域 -->
          <div
            v-for="(item1, index1) in item"
            :key="index1"
            @click="gainName(item1)"
            class="cell"
          >
            {{ item1.brandName }}
          </div>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>
<script>
import { CarName } from '@/api/user'
export default {
  data () {
    return {
      value: '',
      // 车名
      CarName: [],
      cities: {},
      FirstPin: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ]
    }
  },
  created () {
    this.getAllInfo()
  },
  methods: {
    async getAllInfo () {
      try {
        const { data } = await CarName()
        this.CarName = data.data
        const cityName = {}
        this.FirstPin.forEach((item) => {
          cityName[item] = []
          // console.log(cityName)
          // 对比首字母开头
          data.data.forEach((el) => {
            // 将首字母改成大写，这里没有用到，在这里备注一下
            //  let first = el.pinyin.substring(0, 1).toUpperCase();
            if (el.firstLetter === item) {
              cityName[item].push(el)
            }
          })
        })
        this.cities = cityName
      } catch (err) {
        this.$toast('获取失败')
      }
    },
    ClickText () {
      this.$router.push('/carseries')
    },
    // 获取品牌
    gainName (val) {
      // 将车名保存早vuex里面
      this.$store.commit('gainCarName', val.brandName)
      this.$router.push({ path: '/carseries', query: { nameId: val.brandId } })
    },
    clickLeft () {
      this.$router.back()
    }
  }
}
</script>
<style lang="less" scoped>
.IndexName {
  display: inline-block;
  margin-top: 18px;
  font-size: 20px;
}
.cell {
  // width: 375px;
  height: 45px;
  margin-left: 15px;
  margin-top: 9px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 21px;
}
</style>
